<!--
 * @Description: 
 * @Author: YaoXiaotTian
 * @Date: 2021-05-28 18:39:46
 * @LastEditors: chencaoyang
 * @LastEditTime: 2021-06-15 14:43:57
-->
<template>
  <div class="settlement_wrap">
    <div class="address">
      <span> <i class="el-icon-location"></i>寄送至 </span>
      <p v-if="address">
        {{ address.mapAddress }} {{ address.consigneeAddress }}
      </p>
      <p style="cursor: pointer" v-else @click="addAddress">请先添加地址</p>
      <span v-if="address">{{ address.consigneeTele }}</span>
      <span v-if="address">默认地址</span>
      <!-- <span @click="openDialog" v-if="address">修改本地址</span> -->
    </div>
    <div class="commodities">
      <div class="content" v-for="i in goodsList" :key="i.productId">
        <el-image :src="i.titlePicStr" fit="fill"></el-image>
        <span>{{ i.productName }}</span
        ><span>¥{{ i.productPrice }}</span
        ><span>{{ i.productSpecs }}</span
        ><span>X{{ i.saleCount }}</span
        ><span>¥{{ i.productPrice * i.saleCount }}</span>
      </div>
    </div>
    <div class="s_bottom">
      <!-- <div><span>商品总额：</span><span>¥400</span></div> -->
      <!-- <div><span>运费：</span><span>¥15</span></div> -->
      <div>
        <span>总计：</span><span>¥{{ totalPrices.toFixed(2) }}</span>
      </div>
      <el-button class="submit" @click="addOrder">提交订单</el-button>
    </div>
    <el-dialog
      title="修改收货地址"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form>
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
        <el-form-item label="详细地址：">
          <el-input
            v-model="address"
            autocomplete="off"
            placeholder="请输入详细的地址"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import { get_data } from "../../utils/utils";
export default {
  data() {
    return {
      goodsList: [],
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      options: regionData,
      selectedOptions: [],
      dialogFormVisible: false,
      address: "",
      productId: "",
      totalPrices: 0,
      // formLabelWidth: "120px",
    };
  },
  created() {
    this.productId = this.$route.query.productId;
    this.getOrderParam();
    this.getAddress();
  },
  methods: {
    addAddress() {
      this.$router.push({
        path: `/order/address`,
      });
    },
    addOrder() {
      if (!this.address) {
        this.$message("请先添加地址");
        return;
      }
      let orderInfo = [];
      this.goodsList.forEach((item) => {
        orderInfo.push({
          productId: item.productId,
          saleCount: item.saleCount,
          specsId: item.specsId,
        });
      });
      let { id } = JSON.parse(get_data("userInfo"));
      this.$http
        .fetch(this.$apiPath.orderAdd, {
          method: "post",
          data: {
            addressId: this.address.id,
            customerId: id,
            orderInfo,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.$router.push({
              path: `/pay`,
              query: {
                mergeOrderId: res.data.mergeOrderId,
                totalPrices: this.totalPrices,
              },
            });
          }
        });
      // .catch((res) => {
      //   // console.log(res, 888);
      //   this.$message.error(res.data.msg);
      // });
    },
    getAddress() {
      let { id } = JSON.parse(get_data("userInfo"));
      this.$http
        .fetch(this.$apiPath.getAddress, {
          method: "get",
          params: {
            customerId: id,
          },
        })
        .then((res) => {
          let addressList = res.data;
          if (addressList && addressList.length) {
            addressList.forEach((item) => {
              if (item.defaultStatus == "true") {
                this.address = item;
              }
            });
          }
        });
    },
    getOrderParam() {
      this.$http
        .fetch(this.$apiPath.getOrderParamPc, {
          method: "get",
          params: {
            vo: this.productId,
          },
        })
        .then((res) => {
          this.goodsList = res.data;
          if (this.goodsList && this.goodsList.length) {
            this.goodsList.forEach((item) => {
              this.totalPrices += item.productPrice * item.saleCount;
            });
          }
        });
    },
    openDialog() {
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
